<template>
  <div class="container">
    <!-- 顶部logo -->
    <div class="header" fixed>
      <div class="left">
        <img src="/logo_pic/logo.png" alt="" />
      </div>
      <div class="right">
        <img src="/logo_pic/铃铛.png" alt="" />
      </div>
    </div>
    <!-- 轮播图 -->
    <mt-swipe class="myswipe" :style="{ height: h }" :speed="300" :auto="5000">
      <mt-swipe-item>
        <img src="/swipe_pic/1.jpg" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/swipe_pic/2.jpg" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/swipe_pic/3.jpg" />
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="/swipe_pic/4.jpg" />
      </mt-swipe-item>
    </mt-swipe>
    <!-- 中间各种选项 -->
    <ul class="iconbar">
      <router-link to="/slwords" class="icon">
        <img src="/ten_pic/真题.jpg" /><span class="router">词汇</span>
      </router-link>
      <router-link to="/ydu" class="icon">
        <img src="/ten_pic/词汇.jpg" /><span class="router">阅读</span>
      </router-link>
      <router-link to="/laos" class="icon">
        <img src="/ten_pic/阅读.jpg" /><span class="router">教师</span>
      </router-link>
      <router-link to="/#" class="icon">
        <img src="/ten_pic/写作模板.jpg" /><span class="router">实用英语</span>
      </router-link>
      <li class="icon"><img src="/ten_pic/听力.jpg" /><span>听力</span></li>
      <li class="icon"><img src="/ten_pic/写译.jpg" /><span>写译</span></li>
      <li class="icon">
        <img src="/ten_pic/暑假班pro.jpg" /><span>暑假班pro</span>
      </li>
      <li class="icon"><img src="/ten_pic/暑假班.jpg" /><span>暑假班</span></li>
      <li class="icon"><img src="/ten_pic/听力班.jpg" /><span>听力班</span></li>
      <li class="icon">
        <img src="/ten_pic/预约查分.jpg" /><span>预约查分</span>
      </li>
    </ul>
    <!-- 广告部分 -->
    <div>
      <div>
        <img class="first" :style="{ height: w }" src="/three_pic/one.jpg" />
      </div>
      <div class="adv">
        <div class="adv_left">
          <span>暑期必看</span>
          <!-- <span>领劵假期逆袭</span> -->
          <img src="/three_pic/暑期必看.png" alt="" />
        </div>
        <div class="adv_right">
          <span>单项训练</span>
          <!-- <span>限时领纸质版真</span> -->
          <img src="/three_pic/单项训练.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 热门课程 -->
    <div class="hot_class" v-for="(item, i) of date" :key="i">
      <h3><a style="color:#202124" target="_self" :href="item.cSrc" >【{{ item.cTitle1 }}】{{ item.cTitle2 }}</a></h3> 
      <span class="kuang">{{ item.cType }}</span>
      <span>{{ item.cTimeStart }}</span>
      <!-- 头像 -->
      <div class="photo">
        <div class="photo_div">
          <img :src="item.cAvatar1" alt="" />
          <span>{{ item.cTeacher1 }}</span>
        </div>
        <div class="photo_div">
          <img :src="item.cAvatar2" alt="" />
          <span>{{ item.cTeacher2 }}</span>
        </div>
        <div class="photo_div">
          <img :src="item.cAvatar3" alt="" />
          <span>{{ item.cTeacher3 }}</span>
        </div>
        <div class="text">
          <span>￥{{ item.cPrice }}</span>
          <mt-button
            @click="btn(item.cId)"
            v-show="datelist.indexOf(item.cId) == -1"
            size="small"
            type="danger"
            >收藏</mt-button
          >
          <mt-button
            @click="del(item.cId, 1)"
            v-show="datelist.indexOf(item.cId) != -1"
            size="small"
            type="primary"
            >已收藏</mt-button
          >
          <p>限领{{ item.cSaled }}人 已领{{ item.cSales }}人</p>
        </div>
      </div>
    </div>
    <!-- 底部选项卡 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="hand_pick">
        <img
          v-if="selected == 'hand_pick'"
          src="../assets/tabbar_pic/hand_pick1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/hand_pick.png"
          slot="icon"
          alt=""
        />
        精选</mt-tab-item
      >
      <mt-tab-item id="my_courses">
        <img
          v-if="selected == 'my_courses'"
          src="../assets/tabbar_pic/my_courses1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/my_courses.png"
          slot="icon"
          alt=""
        />
        我的课程</mt-tab-item
      >

      <mt-tab-item id="cdong">
        <img
          v-if="selected == 'cdong'"
          src="../assets/tabbar_pic/cdong3.png"
          slot="icon"
          alt=""
        />
        <img v-else src="../assets/tabbar_pic/cdong2.png" slot="icon" alt="" />
        虫洞</mt-tab-item
      >

      <mt-tab-item id="personal_center">
        <img
          v-if="selected == 'personal_center'"
          src="../assets/tabbar_pic/personal_center1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/personal_center.png"
          slot="icon"
          alt=""
        />
        个人中心</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      selected: "hand_pick",
      h: "123px",
      w: "350px",
      date: [],
      datelist: [],
      disabled: true,
      uId: sessionStorage.uId,
      islogin: sessionStorage.islogin,
    };
  },
  watch: {
    selected(newval) {
      if (newval == "hand_pick") {
        this.$router.push("/"); //  路径 / 映射到Index.vue
      } else if (newval == "personal_center") {
        this.$router.push("/WeiPersonal"); // 路径 /Personal 映射到Personal.vue
      } else if (newval == "cdong") {
        this.$router.push("/cdong");
      } else if (newval == "my_courses") {
        if(!this.islogin){
          this.$router.push("/login")
        }else {
          this.$router.push("/myClass");
        }
      }
    },
  },
  methods: {
    initSwipHeigth() {
      // 计算轮播图的高度，对h变量进行赋值
      let picw = 414; // 图片宽度
      let pich = 130; // 图片高度
      let imgw = window.screen.width; // 屏幕的宽度
      let imgh = (imgw * pich) / picw + "px";
      this.h = imgh;
    },
    guanggaoWidth() {
      // 计算广告的高度，对w变量进行赋值
      let picw = 1060; // 图片宽度
      let pich = 350; // 图片高度
      let imgw = window.screen.width; // 屏幕的宽度
      let imgh = (imgw * pich) / picw + "px";
      this.w = imgh;
    },

    // 查询收藏
    reqCol() {
      this.axios.post("/kc/getct", `uId=${this.uId}`).then((res) => {
        // console.log(res)
        let vall = res.data.result;
        if (vall) {
          for (var item of vall) {
            // console.log(item)
            this.datelist.push(item.cId);
          }
        } else {
          this.datelist = [];
        }
        // console.log(this.datelist)
        this.axios.get("/kc/course").then((res) => {
          let val = res.data.result;
          //  console.log(val)
          this.date = val;
        });
      });
    },
    // 点击收藏
    btn(i) {
      if (this.uId == undefined) {
        Toast("请先登录或者注册");
        return;
      } else {
      // 获取cId
      let cid = i;
      // console.log(cid)
      // 将获取到的cid添加到数组中刷新页面
      this.datelist.push(cid);
      // console.log(this.uId)
        this.axios
          .post("/kc/addct", `uId=${this.uId}&cId=${cid}`)
          .then((res) => {
            // console.log(res.data);
            let code = res.data.code;
            if (code == 200) {
              Toast(res.data.message);
            }
          });
      }
    },
    // 点击取消收藏
    del(cid, uid) {
      this.axios.post("/kc/delct", `cId=${cid}&uId=${this.uId}`).then((res) => {
        // console.log(res)
        for (var i = 0; i < this.datelist.length; i++) {
          if (cid == this.datelist[i]) {
            // 删除数组中的对应对象刷新页面
            this.datelist.splice(i, 1);
            Toast(res.data.message);
          }
        }
      });
    },
  },

  /** 页面元素挂载完毕后执行该生命周期方法 */
  mounted() {
    // 轮播图适配高度
    this.initSwipHeigth();
    // 广告适配高度
    this.guanggaoWidth();
    // 请求收藏数据
    this.reqCol();
  },
};
</script>

<style scoped>
@import url("../assets/css/index.css");
</style>



